<template>
	<view class="index-wrapper">
		<MyNavbar title="小栗旬-全国巡剪(演示)" :autoBack="false"/>
		
		<!-- 广告轮播组件 -->
		<HomeBanner />
		
		<!-- 宫格功能区域 -->
		<u-grid
			style="background-color: #FFFFFF;padding: 24rpx;"
			:border="false"
			col="4"
        >
            <u-grid-item
				v-for="(listItem, listIndex) in gridData"
				:key="listIndex"
				@click="toPage(listItem.url)"
            >
                <u-icon
					:customStyle="{'paddingTop':'40rpx'}"
					:name="listItem.icon" color="rgb(25, 137, 250)"
					:size="40"
                ></u-icon>
                <text class="grid-text">{{listItem.title}}</text>
            </u-grid-item>
        </u-grid>
		
		<!-- 通知 -->
		<u-notice-bar 
			v-if="noticeDataCpt && noticeDataCpt.length>0" :text="noticeDataCpt" direction="column"
			mode="link" @click="onClickNoticeItem">
		</u-notice-bar>
		
		<!-- 海报 -->
		<div style="height: 350rpx;margin-top: 24rpx;background-color: transparent;margin-left: 24rpx;margin-right: 24rpx;" class="flex">
			<!-- 左边 -->
			<div style="width: 0;flex: 1;height: 100%;border-right: 1rpx solid #F1F1F1;" @click="toXunJian()">
				<u-image 
					width="100%" height="100%" style="height: 100%;"
					mode="scaleToFill"
					src="/static/poster-1.png" />
			</div>
			<!-- 右边 -->
			<div style="width: 0;flex: 1;height: 100%;">
				<!-- 上 -->
				<div style="width: 100%;height: 50%;border-bottom: 1rpx solid #F1F1F1;" @click="$refs.tabbar.openTab('yuyue')">
					<u-image 
						width="100%" height="100%" style="height: 100%;"
						mode="scaleToFill"
						src="/static/poster-2.png" />
				</div>
				<!-- 下 -->
				<div style="width: 100%;height: 50%;" @click="toPage('/pages/nearbyShop/nearbyShop')">
					<u-image 
						width="100%" height="100%" style="height: 100%;"
						mode="scaleToFill"
						src="/static/poster-3.png" />
				</div>
			</div>
		</div>
		
		<!-- 发型案例 -->
		<div style="margin-top: 24rpx;">
			<div style="padding: 12rpx;text-align: center;font-size: 36rpx;">成功案例</div>
			
			<!-- 列表 -->
			<HairdoResultList />
		</div>
		
		<PageFooter />
		<!-- 底部tabbar -->
		<MyTabbar ref="tabbar" active="home"/>
	</view>
</template>

<script>
	// 广告轮播组件
	import HomeBanner from '@/components/HomeBanner.vue';
	// 发型成功案例列表
	import HairdoResultList from '@/components/hairdo/HairdoResultList.vue';
	// 底部tabbar
	import MyTabbar from '@/components/layout/MyTabbar.vue';
	
	export default {
		components: {
			HomeBanner, HairdoResultList, MyTabbar
		},
		data() {
			return {
				// 通知数据
				noticeData: [],
				// 宫格按钮数据
				gridData: [
					{icon: 'photo', title: '巡剪', url: '/pages/xunJian/xunJian'},
					{icon: 'map', title: '附近门店', url: '/pages/nearbyShop/nearbyShop'},
					{icon: 'cut', title: '预约', url: '/pages/yuYue/yuYue'},
					{icon: 'grid-fill', title: '更多'},
				]
			}
		},
		computed: {
			noticeDataCpt(){
				let {noticeData} = this;
				if (noticeData) {
					let list = noticeData.map(item=>item.title);
					return list;
				}
				return null;
			},
		},
		onLoad() {
			this.findNoticeList();
		},
		//  触发下拉刷新
		onPullDownRefresh(){
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取通知列表
			findNoticeList(){
				this.$api.app.banner.findList({adType:2}).then(({data})=>{
					this.noticeData = data;
				});
			},
			/**
			 * 点击通知项
			 */
			onClickNoticeItem(index){
				console.log("点击了通知项：", index);
				let item = this.noticeData[index];
				let url = item.url;
				if (url) {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + url
					})
				}
			},
			
			// 打开巡剪页面
			toXunJian(){
				uni.navigateTo({
					url: '/pages/xunJian/xunJian'
				})
			},
			toPage(url){
				if (url) {
					if (url.indexOf('/pages/yuYue/yuYue') === 0) {
						this.$refs.tabbar.openTab('yuyue');
					} else {
						uni.navigateTo({
							url: url
						})
					}
				} else {
					this.$utils.showToast('持续开发中...');
				}
			},
		}
	}
</script>

<style scoped>
	.index-wrapper{
		padding-bottom: 50rpx;
	}
</style>
